<template>
  <div class="container">
    <div class="selection">
      <ul class="left">
        <scroll-view :scroll-y="true"
                     :style="{'height': '100%'}">
          <li class="province"
              v-for="(item, index) in province_list"
              :key="index"
              @tap="change_province(item)">
            {{item.name}}
          </li>
        </scroll-view>
      </ul>
      <ul class="center"
          v-if="city_list.length>0">
        <scroll-view :scroll-y="true"
                     :style="{'height': '100%'}">
          <li class="city"
              v-for="(val, index) in city_list"
              :key="index"
              @tap="change_city(val)">
            {{val.name}}
          </li>
        </scroll-view>
      </ul>
      <ul class="right"
          v-if="area_list.length>0">
        <scroll-view :scroll-y="true"
                     :style="{'height': '100%'}">
          <li class="area"
              v-for="(el, index) in area_list"
              :key="index"
              @tap="select_area(el)">
            {{el.name}}
          </li>
        </scroll-view>
      </ul>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      province_list: [],
      province_id: "",
      province_name: "",
      city_list: [],
      city_id: "",
      city_name: "",
      area_list: [],
      area_id: "",
      area_name: "",
      city_name: ""
    };
  },
  methods: {
    getProvince () {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post("api/v4_2/area/prov_city", {}, result => {
        let res = result.data;
        if (res.status_code == 0) {
          let arr = res.data.data[0].children,
            province_list = [],
            city_list = [];
          // 省数组
          arr.forEach(item => {
            let children = [];
            // 市数组
            item.children.forEach(val => {
              let children1 = [];
              // 区数组
              if (Array.isArray(val.children)) {
                val.children.forEach(el => {
                  children1.push({
                    name: el.name,
                    id: el.id
                  });
                });

                children.push({
                  name: val.name,
                  id: val.id,
                  children: children1
                });
              } else {
                children.push({
                  name: val.name,
                  id: val.id,
                  children: [...item.children]
                });
                // children1 = val;
              }
            });
            province_list.push({
              id: item.id,
              name: item.name,
              children: children
            });
          });
          this.province_list = province_list;
          wx.hideLoading();
        } else {
          wx.hideLoading();
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
          return false;
        }
      })
    },
    change_province (item) {
      let that = this;
      that.area_list = [];
      that.province_id = item.id;
      that.province_name = item.name;
      that.city_list = item.children;
    },
    change_city (item) {
      let that = this;
      this.area_list = item.children;
      this.city_id = item.id;
      this.city_name = item.name;
    },
    select_area (item) {
      this.area_id = item.id;
      this.area_name = item.name;
      let data = JSON.stringify({
        province_id: this.province_id,
        city_id: this.city_id,
        area_id: this.area_id,
        province_name: this.province_name,
        city_name: this.city_name,
        area_name: this.area_name
      });
      wx.setStorageSync("address_data", data);
      wx.navigateBack({
        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    get_location () {
      let that = this;
      wx.authorize({
        scope: "scope.userLocation",
        success () {
          wx.getLocation({
            type: 'gcj02',
            success (res) {
              let longitude = res.longitude; // 经度，浮点数，范围为-180~180，负数表示西经
              let latitude = res.latitude; // 纬度，浮点数，范围为-90~90，负数表示南纬
              wx.request({
                url:
                  "https://api.map.baidu.com/geocoder/v2/?ak=QHRdba4oL7bXA0eVS2v1YdakVHEpXKjk&location=" +
                  latitude +
                  "," +
                  longitude +
                  "&output=json",
                data: {},
                header: {
                  "Content-Type": "application/json"
                },
                success: function (res) {
                  var city = res.data.result.addressComponent.city;
                  that.city_name = city.split("市")[0];
                },
                fail: function () { }
              });
            },
            fail () {
              wx.showToast({
                title: "无法获取地理位置",
                icon: "none",
                duration: 2000,
                mask: true
              });
            }
          });
        },
        fail () {
          that.city_name = "武汉";
          that.city_id = 180;
        }
      });
    }
  },
  onLoad () {
    Object.assign(this.$data, this.$options.data());
    wx.setNavigationBarTitle({
      title: "选择地区"
    });
  },
  onShow () {
    // this.get_location();
    this.getProvince();
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(251, 251, 251, 1);
  display: flex;
  flex-direction: column;
  .title {
    line-height: 44px;
    font-size: 14px;
    font-family: "Medium";
    color: rgba(102, 102, 102, 1);
    position: relative;
    padding-left: 40px;
    .icon {
      width: 25px;
      height: 28px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      .image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .selection {
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    .left {
      height: 100%;
      overflow: auto;
      flex: 1;
      box-shadow: 1px 0px 0px 0px rgba(204, 204, 204, 0.5);
      .province {
        line-height: 44px;
        padding-left: 15px;
        font-size: 14px;
        font-family: "Regular";
        color: rgba(136, 136, 136, 1);
        &:hover,
        &:active,
        &:visited {
          font-family: "Medium";
          color: rgba(246, 70, 101, 1);
        }
      }
    }
    .center {
      height: 100%;
      overflow: auto;
      flex: 1;
      box-shadow: 1px 0px 0px 0px rgba(204, 204, 204, 0.5);
      .city {
        line-height: 48px;
        padding-left: 15px;
        font-size: 14px;
        font-family: "Regular";
        color: rgba(68, 68, 68, 1);
        &:hover,
        &:active,
        &:visited {
          font-family: "Medium";
          color: rgba(246, 70, 101, 1);
        }
      }
    }
    .right {
      height: 100%;
      overflow: auto;
      flex: 1;
      box-shadow: 1px 0px 0px 0px rgba(204, 204, 204, 0.5);
      .area {
        line-height: 48px;
        padding-left: 15px;
        font-size: 14px;
        font-family: "Regular";
        color: rgba(68, 68, 68, 1);
        &:hover,
        &:active,
        &:visited {
          font-family: "Medium";
          color: rgba(246, 70, 101, 1);
        }
      }
    }
  }
}
</style>
